<template>
  <div>
    <PageWrapper>
      <a-modal
        width="40%"
        v-model:visible="visible"
        title="新增链接"
        @cancel="handleCancel"
        @ok="handleOk"
        :afterClose="handleAterClose"
      >
        <a-form
          ref="formRef"
          :model="formState"
          name="basic"
          :label-col="{ span: 6 }"
          :wrapper-col="{ span: 16 }"
          autocomplete="off"
        >
          <a-form-item
            style="margin-top: 1rem"
            label="链接名称"
            name="name"
            :rules="[{ required: true, message: '请输入链接名称!' }]"
          >
            <a-input v-model:value="formState.name" />
          </a-form-item>
          <a-form-item
            label="链接地址"
            name="url"
            :rules="[{ required: true, message: '请输入链接地址!' }]"
          >
            <a-input v-model:value="formState.url">
              <template #addonBefore>
                <a-select v-model:value="htValue" style="width: 90px">
                  <a-select-option value="http://">http://</a-select-option>
                  <a-select-option value="https://">https://</a-select-option>
                </a-select>
              </template>
            </a-input>
          </a-form-item>
          <a-form-item
            label="标记"
            name="flag"
            :rules="[{ required: true, message: '请选择标记!' }]"
          >
            <a-select v-model:value="formState.flag" :options="linksOptions.flagOptions" />
          </a-form-item>
          <a-form-item
            name="cid"
            label="分类"
            :rules="[{ required: true, message: '请选择链接分类！' }]"
          >
            <a-select
              v-model:value="formState.cid"
              :field-names="{ label: 'name', value: 'id' }"
              :options="linksOptions.options"
            />
          </a-form-item>
        </a-form>
      </a-modal>
    </PageWrapper>
  </div>
</template>

<script setup lang="ts">
  import { ref, reactive, inject } from 'vue';
  import { addLink, editLink } from '/@/api/cms/link';
  import { message } from 'ant-design-vue';
  import { PageWrapper } from '/@/components/Page';

  const htValue = ref<string>('http://');
  interface FormState {
    name: string;
    url: string;
    cid: number;
    flag: number;
    id?: number;
    odr?: number;
  }
  const formRef = ref<any>();
  const formState = reactive<any>({
    name: '',
    url: '',
    flag: '',
    cid: '',
    id: '',
  });

  const visible = ref<boolean>(false);
  const modelStatus = ref<string>('');
  const linksOptions = reactive({
    options: [],
    flagOptions: [
      {
        label: '正常',
        value: '0',
      },
      {
        label: '禁用',
        value: '5',
      },
      {
        label: '已删除',
        value: '9',
      },
    ],
  });

  // 接受父组件传递的获取链接列表的方法
  const getQueryLinks: any = inject('getQueryLinks');

  // 初始化弹窗
  const showModal = (record, status: string) => {
    modelStatus.value = status;
    linksOptions.options = record;
    visible.value = true;
  };

  const handleOk = async () => {
    try {
      const values = await formRef.value.validateFields();
      formState.url = htValue.value + values.url; // url 地址拼接处理
      // 使用as 类型声明参数
      if (modelStatus.value === 'add') {
        addLink(formState as FormState)
          .then((res) => {
            message.success('新增成功!');
            getQueryLinks();
            handleCancel();
          })
          .catch((e) => {
            message.error(e);
          });
      } else {
        editLink(formState as FormState)
          .then((res) => {
            message.success('修改成功!');
            getQueryLinks();
            handleCancel();
          })
          .catch((e) => {
            message.error(e);
          });
      }
    } catch (errorInfo) {}
  };
  const handleCancel = () => {
    formRef.value.resetFields();
    visible.value = false;
  };
  // 完全关闭，清空
  const handleAterClose = () => {
    formRef.value.resetFields();
    modelStatus.value = '';
  };

  // 编辑赋值
  const editInit = (data) => {
    if (data.url.includes('https://')) {
      formState.url = data.url.split('https://')[1];
      htValue.value = 'https://';
    } else {
      formState.url = data.url.split('http://')[1];
      htValue.value = 'http://';
    }
    formState.id = data.id;
    formState.cid = data.cid;
    formState.flag = data.flag;
    formState.name = data.name;
  };

  defineExpose({
    showModal,
    formState,
    editInit,
  });
</script>

<style scoped></style>
